<template>
	<view class="peoBox">
		<view class="container">
			<!-- 导航栏渐变色 -->
			<u-navbar :is-back="true" title="个人中心" back-icon-color="#fff" :background="background" title-color="white">
			</u-navbar>
			<ul class="Information">
				<button class="image" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="people.avatar" />
				</button>
				<li class="name"><span>用户名：</span>
					<input type="text" placeholder="请输入用户名" v-model="people.real_name" />
				</li>
				<li class="phone">
					<span>手机号：</span>
					<input type="tel" placeholder="请输入手机号" v-model="people.mobile" />
				</li>
				<li><span>所属单位：</span>{{people.depart.title}}</li>
				<li><span>所属职位：</span>{{people.role.name}}</li>
			</ul>
		</view>
		<view class="detial">
			<!-- 点击保存 -->
			<ul class="deatilUl">
				<li>
					<u-button type="primary" @click="cancel()" plain='true'>保存</u-button>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg,#A471FC, #77B4F7)'
				},
				people: {
					real_name: "",
					mobile: "",
					avatar: ""
				},
			}
		},
		methods: {
			// btn中open-type事件,获取用户头像事件
			onChooseAvatar(e) {
				this.people.avatar = e.detail.avatarUrl
			},
			// 保存修改
			cancel() {
				this.$http(this.$api.changeXX, {
					avatar: this.people.avatar,
					real_name: this.people.real_name,
					mobile: this.people.mobile,
					id: this.people.id
				}).then(res => {
					console.log(res, 'res');
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateBack({
								url: './myBackstage'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			},
		},
		onLoad() {
			this.people = this.person
		},
		computed: {
			...mapState('homePage', ['person'])
		}
	}
</script>

<style lang="scss">
	.Information li {
		border-bottom: 1px #e8e8e8 solid;
		width: 95%;
		height: 120rpx;
		margin: 0 auto;
		line-height: 120rpx;
		text-indent: 0.5em;
		display: flex;
		justify-content: left;
		font-size: 14px;
	}

	.Information>button:first-child {
		// display: flex;
		// justify-content: left;
		// height: 220rpx;
		// line-height: 220rpx;
		border: none;
		outline: none;
		padding: 0;
		border-radius: 0;
		color: transparent;
		background-color: transparent;

		&::after {
			border: none;
		}

		image {
			width: 190rpx;
			height: 190rpx;
			border-radius: 50%;
			background-size: 100%;
			margin: 20rpx auto 0;
			background-color: #F8F8F8;
		}
	}


	.Information li span {
		width: 170rpx;
		height: 100rpx;
		text-align-last: justify;
	}

	.detial {
		margin-top: 40rpx;
	}

	.deatilUl {
		display: flex;
		justify-content: space-around;
	}

	.deatilUl li button {
		width: 350rpx;
		height: 90rpx;
		margin-top: 100rpx;
	}

	.uni-list {
		display: flex;
		justify-content: left;
	}

	.uni-list-cell {
		width: 200rpx;
		display: flex;
		justify-content: left;
	}

	.name input {
		margin-top: 38rpx;
	}

	.password input {
		margin-top: 38rpx;
	}

	.phone input {
		margin-top: 38rpx;
	}

	.phone button {
		font-size: 25rpx;
		margin-top: 18rpx;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #ccc;
		color: white;
	}
</style>
